<template>
    <div class="stap3">
        <!-- 头部标题 -->
        <header>
            <van-nav-bar title="" left-text="返回" :border="false" left-arrow >
                <template #left>
                    <van-icon name="arrow-left" @click="$router.back()" color="black" size="20" />
                </template>
                <template #title>
                    <h3>嗨购注册</h3>
                </template>
            </van-nav-bar>
        </header>
          <!-- 用户注册表单 -->
        <main>
          <nav>
          <div class="logo">
            <img src="" alt="">
          </div>
        </nav>
            <div class="fromLogin">
                <p class="line"><input type="password" name="" id="" class="tel" v-model="password" placeholder="请设置8-20位登录密码"></p>
                <p class="text">密码由8-20位字母、数字或半角符号组成，不能是10位以下纯数字/字母/半角符号，字母需区分大小写</p>
                <p>
                    <van-button color="linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18)" :disabled="flag" :round="true" size="large" @click="register">
                    完成
                    </van-button>
                </p>
            </div>
            <p class="error">遇到问题？请 <a href="">联系客服</a></p>
        </main>
    </div>
</template>
<style lang="stylus" scoped>
.text
  color #555
  font-size .875rem
  margin: .625rem 0 3.25rem
.error
  padding-top .625rem
  font-size .875rem
  color #555
  a
    color #3b7adb
.logo
  display flex
  flex-direction column
  img
    margin auto
    width 5.5rem
    padding 1.25rem 0
.fromLogin
    display flex
    flex-direction column
    .line
        border-bottom 1px solid rgb(239,239,239)
        margin-bottom: 1.875rem
        display flex
        width 100%
        margin: 0.5rem 0 0
        align-items: center
        a
            min-width 3.125rem
            font-size 1rem
            color black
            margin-right .3125rem
            display flex
            justify-content: space-around
        .tel
            flex 1
            border 0
            height 3.125rem
.stap3 main
    padding 0 1.25rem
</style>
<script>
import Vue from 'vue'
import { getDoFinishregister } from '@/api/User.js'
import { NavBar, Button, Dialog } from 'vant'
Vue.use(NavBar)
Vue.use(Button)
Vue.use(Dialog)
export default {
  data () {
    return {
      password: '',
      tel: ''
    }
  },
  mounted () {
  // 这里判断用户是否输入手机号如果没有输入手机号则跳转回输入手机号的界面
    this.tel = localStorage.getItem('userId') ? localStorage.getItem('userId') : this.$router.push('/register/stap1')
  },
  computed: {
    flag () {
      if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.password)) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    register () {
      getDoFinishregister({ tel: this.tel, password: this.password }).then((res) => {
        if (res.code === '200') {
          Dialog({ message: `注册成功，登录手机为${this.tel}` }).then(() => {
            this.$router.push('/login')
          })
        }
      })
    }
  }
}
</script>
